<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree示例</title>
<link rel="stylesheet" href="../ztree/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="../ztree/css/demo.css">
<script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
var setting = {
	data:{
		simpleData:{
			enable:true
		} 
	},
	async: {
		enable: true,
		url: "list",
		autoParam: ["id"]
	},
	callback: {
		onRemove: zTreeOnRemove,
		beforeRemove: zTreeBeforeRemove,
		onRename: zTreeOnRename
		//onClick: zTreeOnClick
	},
	edit: {
		enable: true,
		removeTitle: '删除',
		renameTitle: '修改'
	},
	view: {
		addHoverDom: addHoverDom,
		removeHoverDom: removeHoverDom,
		selectedMulti: false
	},

};

function zTreeOnClick(event, treeId, treeNode) {
    $('#myForm').load('edit',{id:treeNode.id});
}

function zTreeOnRemove(event, treeId, treeNode) {
	$.post('delete',{id:treeNode.id},function(data){});
}

function zTreeOnRename(event, treeId, treeNode, isCancel) {
	$.post('rename',{id:treeNode.id,name:treeNode.name,pId:treeNode.pId},function(data){});
}

function zTreeBeforeRemove(treeId, treeNode) {
	return confirm("你确定要删除'"+treeNode.name+"'节点吗？");
}

var newCount = 1;
function addHoverDom(treeId, treeNode) {
	var sObj = $("#" + treeNode.tId + "_span");
	if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
	var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
		+ "' title='新增' onfocus='this.blur();'></span>";
	sObj.after(addStr);
	var btn = $("#addBtn_"+treeNode.tId);
	if (btn) btn.bind("click", function(){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		$.post("add",{pId:treeNode.id},function(data){
			zTree.addNodes(treeNode, data);
		});
		return false;
	});
}

function removeHoverDom(treeId, treeNode) {
	$("#addBtn_"+treeNode.tId).unbind().remove();
};

/* var zNodes =[
	{ id:1, pId:0, name:"父节点1 - 展开", open:true},
	{ id:11, pId:1, name:"父节点11 - 折叠"},
	{ id:111, pId:11, name:"叶子节点111"},
	{ id:112, pId:11, name:"叶子节点112"},
	{ id:113, pId:11, name:"叶子节点113"},
	{ id:114, pId:11, name:"叶子节点114"},
	{ id:12, pId:1, name:"父节点12 - 折叠"},
	{ id:121, pId:12, name:"叶子节点121"},
	{ id:122, pId:12, name:"叶子节点122"},
	{ id:123, pId:12, name:"叶子节点123"},
	{ id:124, pId:12, name:"叶子节点124"},
	{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
	{ id:2, pId:0, name:"父节点2 - 折叠"},
	{ id:21, pId:2, name:"父节点21 - 展开", open:true},
	{ id:211, pId:21, name:"叶子节点211"},
	{ id:212, pId:21, name:"叶子节点212"},
	{ id:213, pId:21, name:"叶子节点213"},
	{ id:214, pId:21, name:"叶子节点214"},
	{ id:22, pId:2, name:"父节点22 - 折叠"},
	{ id:221, pId:22, name:"叶子节点221"},
	{ id:222, pId:22, name:"叶子节点222"},
	{ id:223, pId:22, name:"叶子节点223"},
	{ id:224, pId:22, name:"叶子节点224"},
	{ id:23, pId:2, name:"父节点23 - 折叠"},
	{ id:231, pId:23, name:"叶子节点231"},
	{ id:232, pId:23, name:"叶子节点232"},
	{ id:233, pId:23, name:"叶子节点233"},
	{ id:234, pId:23, name:"叶子节点234"},
	{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
]; */

$(function(){
	$.fn.zTree.init($("#treeDemo"), setting);
});

</script>
<style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>

</head>
<body>
	<div class="zTreeDemoBackground" style="float: left;">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div id="myForm" style="float: left;width:500px;height: 300px;padding-top: 20px;">
	</div>
</body>
</html>